import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ModalController} from '@ionic/angular';
import {PreviewImgComponent} from '../../../../common/component/preview-img/preview-img.component';

@Component({
    selector: 'app-show-image',
    templateUrl: './show-image.component.html',
    // styleUrls: ['./show-image.component.less'],
})
export class ShowImageComponent implements OnInit {
    // 该组件接收的数据
    @Input() InputData: any[];
    // 点击该组件后向父组件返回的数据
    @Output() ReturnData: EventEmitter<any> = new EventEmitter<any>();

    constructor(
        public modalController: ModalController
    ) {
    }

    everyLevelDivWidth: string = '107px'; // 应用平铺页面(可拖动)每个横向菜单的宽度

    ngOnInit() {
        this.showMenuClientWidth(document.body.clientWidth);
    }


    /**
     * 根据终端页面的宽度调整页面横向显示的菜单个数
     * judgeClientWidth()
     * @param g
     */
    showMenuClientWidth(clientWidth) {
        console.log('终端宽度 clientWidth = ', clientWidth);
        let num = 0; // 横向div个数
        // 常见的手机屏宽度
        if (clientWidth < 450) {
            num = 3;
        }
        if (clientWidth >= 450 && clientWidth < 650) {
            num = 4;
        }
        // 常见的平板屏幕宽度
        if (clientWidth >= 650) {
            num = 6;
        }

        // 重新排列菜单数据
        let a = [];
        let b = [];
        this.InputData.map((item, index) => {
            if (((index + 1) % num) !== 0) {
                a = a.concat(item);
                if (index + 1 === this.InputData.length) {
                    b.push(a);
                }
            } else {
                a = a.concat(item);
                b.push(a);
                a = [];
            }
        });
        // this.grid = b;
        console.log('最终 this.InputData =', this.InputData);
        // 每个div宽度 = （clientWidth - 16 -横向div个数*2*2px）/ 横向div个数
        this.everyLevelDivWidth = ((clientWidth - 16 - num * 4) / num) + 'px';
        console.log('everyLevelDivWidth = ', this.everyLevelDivWidth);
    }

    // 点击图片预览
    async preview(data: any) {
        const modal = await this.modalController.create({
            component: PreviewImgComponent,
            componentProps: {
                // 'imgUrl': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605018693911&di=b555b86576ac6029a3ecf79d35c0e4d8&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F18%2F56%2F14300000958002128488569856508.jpg'
                'imgUrl': 'assets/application/qualityAssurance/' + data.url
            }
        });
        return await modal.present();
    }
}
